<template>
	<view>
		<page-bg-liner></page-bg-liner>
		<cu-custom :bgLiner="true">
			<block slot="content">添加拜访</block>
		</cu-custom>
		<view class="container">

			<view class="card">
				<view class="card_item flex align-center justify-space-between">
					<view class="name">拜访公司</view>
					<view class="con width100 flex align-start" v-if="clients_id">
						<view class="width100">{{clients_name}}</view>
						<image src="/static/img/right-gray.png"
							style="width: 16rpx;height: 31rpx;min-width: 16rpx;margin-left: 20rpx;"></image>
					</view>
					<view class="con width100 flex align-start" v-if="!clients_id">
						<!-- <view class="width100"></view>
					    <image src="/static/img/right-gray.png" style="width: 16rpx;height: 31rpx;min-width: 16rpx;margin-left: 20rpx;"></image> -->
						<uni-data-select placeholder="请选择" placeholder-style="color:#DEDEDE;font-size:28rpx"
							v-model="dataForm.clients_id" :localdata="range" @change="change"></uni-data-select>
					</view>
				</view>
				<view class="card_item flex align-center justify-space-between">
					<view class="name">拜访人</view>
					<view class="con con_  width100"><input v-model="dataForm.visitors" placeholder="请输入拜访人姓名"
							placeholder-style="font-size:26rpx;color:#DEDEDE"></input></view>
				</view>
				<view class="card_item flex align-center justify-space-between">
					<view class="name">职位</view>
					<view class="con con_  width100"><input v-model="dataForm.position" placeholder="请输入拜访人职位"
							placeholder-style="font-size:26rpx;color:#DEDEDE"></input></view>
				</view>
				<view class="card_item flex align-center justify-space-between">
					<view class="name">联系电话</view>
					<view class="con con_  width100"><input v-model="dataForm.phone" placeholder="请输入拜访人电话"
							placeholder-style="font-size:26rpx;color:#DEDEDE"></input></view>
				</view>
			</view>
			<view class="card" style="margin-top: 20rpx;">
				<view class="card_item flex align-center justify-space-between">
					<view class="name">拜访时间</view>
					<view class="con   width100" @click="showTime"><input v-model="timeStr" disabled placeholder="请选择"
							placeholder-style="font-size:26rpx;color:#DEDEDE" style="pointer-events: none;"></input>
					</view>
				</view>
				<view class="card_item flex align-center justify-space-between">
					<view class="name">拜访地点</view>
					<view class="con   width100 flex align-center">
						<input class="width100" v-model="dataForm.address" disabled placeholder="选择公司后自动填充"
							placeholder-style="font-size:26rpx;color:#DEDEDE"></input>
						<image src="/static/img/local.png"
							style="width: 39rpx;height: 47rpx;min-width: 39rpx;margin-left: 20rpx;"></image>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card_item">
					<view class="name">产品</view>
					<view class="con_ con flex justify-start align-center flex-wrap"
						style="padding-top: 30rpx;padding-bottom: 30rpx;">
						<view @click="typeChange(item)" :class="item.check? 'btn_active': ''" class="btn"
							v-for="(item,index) in typeList" :key="item.id">{{item.name}}</view>
					</view>
				</view>
				<view v-for="(pItem,pIndex) in typeList" :key="pItem.id">
					<view class="" v-show="pItem.check">
						<view class="p-t-10 p-l-15 fontBold">
							{{pItem.name}}
						</view>
						<view class="card_item">
							<view class="name">销售阶段</view>
							<view class="con_ con flex justify-start align-center flex-wrap"
								style="padding-top: 20rpx;padding-bottom: 20rpx;">
								<view @click="tagChange(item,index,pItem)" :class="index == pItem.i? 'btn_active': ''"
									class="btn" v-for="(item,index) in pItem.list" :key="item.id">{{item.name}}</view>
							</view>
						</view>
						<view class="card_item">
							<view class="name">说明</view>
							<view class="con_remark con">
								<!-- 公司市场部的主要职责和业务范围,以及市场部的竞争策略和目标客户 -->
								<!-- <textarea placeholder-style="font-size:26rpx;color:#DEDEDE;" style="width: 100%;" v-model="dataForm.describe" auto-height placeholder="请输入" /> -->
								<view class="m-b-3 m-t-3" v-for="(item,index) in pItem.list" :key="item.id">
									<view class="" v-show="index == pItem.i">
										{{item.describe}}
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>

				<view class="card_item">
					<view class="name">备注</view>
					<view class="con" style="padding-top: 30rpx;;padding-bottom: 30rpx;">
						<view class="remark_textarea">
							<textarea placeholder-style="font-size:26rpx;color:#DEDEDE;"
								style="width: 100%;min-height: 120rpx;" v-model="dataForm.notes" auto-height
								placeholder="请输入" />
						</view>
					</view>
				</view>
			</view>
			<view class="footer_btn" @click="sub">
				提交
			</view>
		</view>
		<timeFrame ref="timeFra" :tapMaskHide="false" @changeTimeFrame="changeTimeFrame" resType="3"></timeFrame>
	</view>
</template>

<script>
	import timeFrame from '@/components/timeFrame.vue';
	export default {
		components: {
			timeFrame
		},
		data() {
			return {
				typeIndex: 0,
				windowHeight: 650,
				windowWidth: 375,
				typeList: [],
				tagBei: [],
				tagList: [],
				tagIndex: 0,
				range: [],
				dataForm: {
					clients_id: '',
					visitors: '',
					phone: '',
					start_at: '',
					end_at: '',
					address: '',
					longitude: '',
					latitude: '',
					describe: '',
					notes: '',
				},
				clients_id: 0,
				clients_name: '',
				timeStr: '',
				list: [],
				id: 0,
				is_next_standard:0,
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id;
				this.clients_id = option.clients_id;
				this.getInfo();
			} else {
				if (option.clients_id) {
					this.clients_id = option.clients_id;
					this.getCompany();
				} else {
					this.getList();
				}
			}
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
		},
		methods: {
			show(ref) {
				this.$refs[ref].show();
			},
			hides(ref) {
				this.$refs[ref].hide();
			},
			typeChange(item) {
				item.check = !item.check;
				// let arr = [];
				// this.typeList.forEach(items => {
				// 	this.tagBei.forEach(items2 => {
				// 		if (items.check&&items.id == items2.pid) {
				// 			arr.push(items2);
				// 		}
				// 	})
				// })
				// this.tagIndex = 0;
				// this.tagList = arr;
			},
			tagChange(item, index,pItem) {
				pItem.i = index;
			},
			change(e) {
				console.log(e)
				this.list.forEach(info => {
					if (info.id == e) {
						this.dataForm.visitors = info.name ? info.name : '';
						this.dataForm.position = info.position ? info.position : '';
						this.dataForm.phone = info.phone ? info.phone : '';
						this.dataForm.address = info.address ? info.address : '';
						this.dataForm.latitude = info.latitude ? info.latitude : '';
						this.dataForm.longitude = info.longitude ? info.longitude : '';
					}
				})
			},
			getCompany() {
				this.$http('/api/clientDetail/' + this.clients_id, {}, 'get').then(res => {
					if (res.code == 200) {
						let datas = res.data;
						let info = datas.info;
						this.dataForm.clients_id = info.id;
						this.dataForm.visitors = info.name ? info.name : '';
						this.dataForm.position = info.position ? info.position : '';
						this.dataForm.phone = info.phone ? info.phone : '';
						this.dataForm.address = info.address ? info.address : '';
						this.dataForm.latitude = info.latitude ? info.latitude : '';
						this.dataForm.longitude = info.longitude ? info.longitude : '';
						this.clients_name = info.company;
						this.tagBei = datas.tag;
						let typeList = datas.product_category;
						let arrs = [];
						typeList.forEach(item => {
							this.$set(item, 'check', false);
							let a = [];
							this.tagBei.forEach(item2=>{
								if(item.id == item2.pid){
									a.push(item2)
								}
							})
							arrs.push({
								...item,
								i:0,
								list:a
							})
						})
						console.log(arrs)
						this.$http('/api/getNextStandard',{clients_id:info.id},'post').then(res => {
							if (res.code == 200) {
								if(res.data){
									let typeList = []
									typeList.push({
											check:false,
											i:0,
											id:0,
											list:[],
											name:'下一阶段'
										})
									this.typeList=typeList
									let arrs2 = []
									arrs2.push({describe:res.data,id:0,name:'下一阶段',pid:0})
									console.log(arrs2)
									this.typeList[0].list = arrs2;
									this.is_next_standard=1;
									console.log(typeList)
								}else{
									this.typeList = arrs;
								}
							}
						})
					}
				})
			},
			getInfo() {
				this.$http('/api/visitDetail/' + this.id, {}, 'get').then(res => {
					if (res.code == 200) {
						let datas = res.data;
						let info = datas.info;
						this.dataForm.clients_id = info.clients_id;
						this.dataForm.visitors = info.visitors ? info.visitors : '';
						this.dataForm.position = info.position ? info.position : '';
						this.dataForm.phone = info.phone ? info.phone : '';
						this.dataForm.address = info.address ? info.address : '';
						this.dataForm.latitude = info.latitude ? info.latitude : '';
						this.dataForm.longitude = info.longitude ? info.longitude : '';
						this.dataForm.notes = info.notes ? info.notes : '';
						this.clients_name = info.company;
						this.timeStr = `${info.start_at.slice(5,16)}}`;
						this.dataForm.start_at = info.start_at;
						this.dataForm.end_at = info.end_at;

						let tag = info.tag ? info.tag.split(',') : [];
						this.typeList = datas.product_category;
						this.typeList.forEach(item => {
							this.$set(item, 'check', false);
							item.id = item.id.toString();
							if (tag.includes(item.id)) {
								item.check = true;
							}
						})
					}
				})
			},
			getList() {
				let data = {
					page: '1',
					page_size: '999'
				};
				this.$http('/api/clientList', data, 'get').then(res => {
					if (res.code == 200) {
						let datas = res.data;
						let list = datas.items;
						this.list = list;
						let arr = [];
						list.forEach(item => {
							arr.push({
								value: item.id,
								text: item.company
							})
						})
						this.range = arr;
						this.tagBei = datas.tag;
						let typeList = datas.product_category;
						let arrs = [];
						typeList.forEach(item => {
							this.$set(item, 'check', false);
							let a = [];
							this.tagBei.forEach(item2=>{
								if(item.id == item2.pid){
									a.push(item2)
								}
							})
							arrs.push({
								...item,
								i:0,
								list:a
							})
						})
						console.log(arrs)
						this.typeList = arrs;
					}
				})
			},
			sub() {
				let arr = [];
				this.typeList.forEach(item => {
					if (item.check) {
						arr.push(item.id);
					}
				})
				if (arr.length) {
					this.dataForm.product_category = arr.join(',');
				}
				let data = this.dataForm;
				if (this.id) {
					data.id = this.id;
				}
				data.is_next_standard=this.is_next_standard
				this.$http('/api/saveVisit', data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(() => {
							this.$store.state.isUpDate = true;
							uni.navigateBack();
						}, 800)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			changeTimeFrame(e) {
				console.log(e);
				this.timeStr = e.showTime;
				this.dataForm.start_at = e.sTime;
				// this.dataForm.end_at = e.eTime;
			},
			showTime() {
				this.show('timeFra');
			},
		}
	}
</script>

<style scoped lang="less">
	.container {
		box-sizing: border-box;
		padding-bottom: 100rpx;
		position: relative;

		.footer_btn {
			margin-top: 100rpx;
			width: calc(100% - 60rpx);
			margin-left: 30rpx;
			color: #4072F4;
			background: #FFFFFF;
			border-radius: 30rpx;
			height: 110rpx;
			text-align: center;
			line-height: 110rpx;
			font-size: 34rpx;
		}

		.card {
			background-color: #fff;

			.card_item {
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				border-bottom: 1px solid rgba(222, 222, 222, .6);
				font-size: 30rpx;

				input {
					font-size: 30rpx;
				}

				&:last-child {
					border: none;
				}

				.name {
					color: #999;
					min-width: 140rpx;
				}

				.con {
					text-align: right;
				}

				.remark_textarea {
					// min-height: 200rpx;
					padding: 30rpx;
					box-sizing: border-box;
					background: #F1F1F1;
					border-radius: 20rpx;
					text-align: left;
					width: 100%;
				}

				.con_remark {
					margin-top: 30rpx;
					margin-bottom: 30rpx;
					font-size: 26rpx;
					color: #999999;
					background: #F7F7F7;
					border-radius: 10px;
					text-align: left;
					padding: 20rpx;
					width: 100%;
				}

				.con_ {
					padding-left: 20rpx;
					text-align: left;

					.btn {
						display: inline-block;
						margin-right: 20rpx;
						padding: 6rpx 15rpx;
						border-radius: 10rpx;
						color: #333333;
						font-size: 26rpx;
						background: #F7F7F7;
						border-radius: 10rpx;
						border: 1px solid #DEDEDE;
						margin-top: 20rpx;

						&:last-child {
							margin-right: 0;
						}
					}

					.btn_active {
						color: #FFFFFF;
						border: 1px solid #4072F4;
						background-color: #4072F4;
					}
				}
			}
		}
	}
</style>